<template>
  <view class="content">
    <view class="title">
      <u-icon name="star-fill"></u-icon>
      <view>推广佣金</view>
    </view>

    <view class="table">
      <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
        <uni-tr>
          <uni-th width="80" align="center">权限</uni-th>
          <uni-th width="50" align="center">普通用户</uni-th>
          <uni-th width="50" align="center">初级会员</uni-th>
          <uni-th width="50" align="center">高级会员</uni-th>
        </uni-tr>

        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">{{ item.Permissions }}</uni-td>

          <uni-td align="center" :class="{
            green: item.name ? true : false,
            red: item.name ? false : true,
          }">
            {{ item.name ? '√' : '×' }}</uni-td>

          <uni-td align="center" :class="{
            green: item.junior ? true : false,
            red: item.junior ? false : true,
          }">{{ item.junior ? '√' : '×' }}</uni-td>

          <uni-td :class="{
            green: item.senior ? true : false,
            red: item.senior ? false : true,
          }" align="center">
            {{ item.senior ? '√' : '×' }}</uni-td>

        </uni-tr>
      </uni-table>
    </view>

    <view class="text">
      <view>推广海报：通过分析海报，邀请你的好友成为你的下级。</view>
      <view>推广海报：通过分享海报，邀请 <span>(躺赢)</span> </view>
      <view>推广海报：通过分享 <span>¥598/年</span>好友成为你的下级 </view>
    </view>

    <view class="btn">
      <u-button :custom-style="{ background: '#5c5a67', color: '#fff', borderRadius: '40rpx',  width: '70%', marginTop: '90rpx' }">
        <span>¥398/年</span>
        <span>加入会员</span>
      </u-button>

      <u-button :custom-style="{ background: '#e7cb9e', color: '#fff', borderRadius: '40rpx', marginTop: '40rpx', width: '70%' }">
        <span>¥598/年</span>
        <span>加入会员</span>
      </u-button>
    </view>
  </view>
</template>

<script>
import { uniTable, uniTr, uniTd, uniTh } from '@dcloudio/uni-ui'
export default {
  components: { uniTable, uniTr, uniTd, uniTh },
  data() {
    return {
      tableData: [
        {
          "Permissions": "卖码权限",
          "name": true,
          "junior": true,
          "senior": true
        }, {
          "Permissions": "推广海报",
          "name": true,
          "junior": true,
          "senior": true
        }, {
          "Permissions": "推广佣金权限",
          "name": false,
          "junior": true,
          "senior": true
        }, {
          "Permissions": "卖码提成权限",
          "name": false,
          "junior": true,
          "senior": true
        }
      ],
      loading: false,
    }
  },
  methods: {
    selectionChange(e) {
      console.log(e.detail.index)
      this.selectedIndexs = e.detail.index
    },
  }
}
</script>

<style scoped lang="scss">
.content {
  padding: 40rpx 20rpx;

  .title {
    display: flex;

    view {
      margin-left: 10rpx;
    }
  }

  .table {
    margin-top: 20rpx;
    .uni-group {
      display: flex;
      align-items: center;
    }

    .red {
      color: #e30000;
    }

    .green {
      color: #1ef23f;
    }
  }
  
  .text {
    margin-top: 40rpx;
    font-size: 24rpx;

    view {
      margin: 20rpx 0;
      span {
        color: #dd4858;
      }
    }
  }

}
</style>
